<!--The content below is only a placeholder and can be replaced.-->
<!-- !isLoggedIn() -->
<div *ngIf="!isLoggedIn()" class="bg txt-center">
  <div class="bg-color">

    <!-- <app-login></app-login> -->
      <div class="alert alert-danger" role="alert" *ngIf="message">
      {{ message }}
    </div>
    <div class="login">
      <h1 id='title-top'>
        教师选课管理系统
      </h1>
      <form *ngIf="!isLoggedIn()" >
        <div class="form-group">
          <label for="username"><i class="glyphicon glyphicon-user"></i>用户名:</label>
          <input class="form-control" name="username" #username>
        </div>

        <div class="form-group">
          <label for="password"><i class="glyphicon glyphicon-lock"></i>密 码:</label>
          <input class="form-control" type="password" name="password" #password>
        </div>
        <div class="txt-center">
          <button class="btn btn-default" (click)="login(username.value, password.value)">
            <i class="glyphicon glyphicon-hand-right"></i>登录
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
<!-- isLoggedIn() -->
<div id="main" *ngIf="isLoggedIn()">
  <div class="well bg-bar" style="width: 100%;text-align:right;">
      <h2 class="title-h">教师选课后台管理系统</h2>
      <i class="glyphicon glyphicon-user" style="top: 4px;"></i>当前用户： <b class="user">{{ getUser() }}</b>
      <button class="btn btn-success" (click)="logout()" style="margin-left:30px;">退出</button>
  </div>
  <div class="row" style="margin: 0; padding: 0">
      <div class="col-lg-1 col-md-1 left-menu">
      <!-- nav nav-pills nav-stacked -->
          <ul class="left-menu-ul">
            <li role="presentation" class="menu-li" [ngClass]="{'active': activeMenu === 'task'}">
              <a [routerLink]="['/task']" routerLinkActive='active-a' (click)='changeRoute("task")' class="li-a"> 
                  <i class="glyphicon glyphicon-grain"></i>任务配置
              </a>
            </li>
            <li role="presentation" class="menu-li" [ngClass]="{'active': activeMenu === 'teacher'}">
              <a [routerLink]="['/teacher']" routerLinkActive='active-a' class="li-a"  (click)='changeRoute("teacher")'> 
                  <i class="glyphicon glyphicon-grain"></i> 教师配置
              </a>
            </li>
            <li role="presentation" class="menu-li" [ngClass]="{'active': activeMenu === 'course'}">
              <a [routerLink]="['/course']" routerLinkActive='active-a' class="li-a" (click)='changeRoute("course")'> 
                  <i class="glyphicon glyphicon-grain"></i> 课程配置
              </a>
            </li>
            <li role="presentation" class="menu-li" [ngClass]="{'active': activeMenu === 'community'}">
              <a [routerLink]="['/community']"  routerLinkActive='active-a' class="li-a" (click)='changeRoute("community")'> 
                  <i class="glyphicon glyphicon-grain"></i> 社区配置
              </a>
            </li>
            <li class="menu-li" *ngIf="getRole() == 0" [ngClass]="{'active': activeMenu === 'role'}">
              <a [routerLink]="['/role']"  routerLinkActive='active-a' class="li-a" (click)='changeRoute("role")'> 
                  <i class="glyphicon glyphicon-grain"></i> 权限配置
              </a>
            </li>
          </ul>
      </div>
      <!-- 内容填充 -->
      <div class="col-lg-11 col-md-11 content" style="">
          <div class="box">
            <router-outlet></router-outlet>
          </div>
      </div>
  </div>
</div>




<div *ngIf="false">
    <div class="btn-group" dropdown>
      <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
        Button dropdown <span class="caret"></span>
      </button>
      <ul *dropdownMenu class="dropdown-menu" role="menu">
        <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
        <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
        <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
        <li class="divider dropdown-divider"></li>
        <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
        </li>
      </ul>
    </div>

    <hr>
    <h3>modal</h3>
    <demo-modal-static></demo-modal-static>
    <hr>
    <h3>table</h3>
    <div class="container">  
      <div class="row">  
        <form>  
          <div class="form-group">  
            <label for="exampleInputEmail1">X坐标</label>  
            <input type="text" class="form-control" id="exampleInputEmail1" placeholder="xcood" name="xcood">  
          </div>  
          <div class="form-group">  
            <label for="exampleInputPassword1">Y坐标</label>  
            <input type="text" class="form-control" id="exampleInputPassword1" placeholder="ycood" name="ycood">  
          </div>  
          <button type="button" class="btn btn-default"  (click)="additem()">添加</button>  
        </form>      
      </div>  
      <div class="row">  
        <data-table [array]="addArray"></data-table><!--导入dataTable组件，并且将父组件里面的form表单数据传递给子组件渲染-->  
      </div>  
    </div>  
  <hr>
<!-- <rt-demo-use-list></rt-demo-use-list> -->
</div>
